<!--
 * @Author: your name
 * @Date: 2021-07-08 12:46:10
 * @LastEditTime: 2021-11-05 14:42:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jinfeng_up\src\pages\systemSetting\column.vue
-->
<template>
  <div class="all">
    <div class="top">
      <span class="title">泳道管理</span>
    </div>
    <div class="bot">
      <div class="bottop">
        <div class="bottoptop">
          <p><span style="color: red">* </span>名称：</p>
          <p style="margin-left: 400px"><span style="color: red">* </span>描述：</p>
        </div>
        <div class="bottopbot">
          <el-input
            v-model="input"
            placeholder="请输入泳道名称"
            maxlength="15"
            show-word-limit
            class="mingcheng"
          ></el-input>
          <el-input
            type="textarea"
            v-model="textarea"
            placeholder="请输入泳道描述"
            maxlength="100"
            show-word-limit
            class="miaoshu"
          ></el-input>
          <el-button type="primary" @click="InsertAsync">保存</el-button>
        </div>
      </div>
      <div class="botbot">
        <div class="botbotbot" v-for="(item, index) in ListAsyncList" :key="index">
          <el-input
            v-model="item.name"
            placeholder="请输入内容"
            maxlength="15"
            show-word-limit
            class="mingcheng"
            @input="oninput(index)"
          ></el-input>
          <el-input
            type="textarea"
            v-model="item.describe"
            placeholder="请输入内容"
            maxlength="100"
            show-word-limit
            class="miaoshu"
            @input="oninput(index)"
          ></el-input>
          <el-button type="primary" @click="onActionConfirm(index, modalType.delete)">删除</el-button>
          <el-button type="primary" v-if="jiaodian === index" @click="UpdateAsync(index)">保存</el-button>
        </div>
      </div>
      <div class="addlie" v-if="Modify === true">
        <div class="addlietop">修改列<span style="float: right; color: #666666" @click="ModifyCancel">x</span></div>
        <div class="addlietcen">
          <p>名称重复</p>
        </div>
        <div class="addliebot">
          <button @click="ModifyCancel">取消</button>
          <button style="background: #3579e0" @click="ModifyConfirm">
            确定
          </button>
        </div>
      </div>
      <CommonDialog ref="CommonDialog" />
    </div>
  </div>
</template>

<script>
import CommonDialog from '@/components/deleteDialog/deleteDialog.vue'
import { LineCntroller } from '@/api/setting/service.js'
export default {
    components: {
        CommonDialog
    },
    data() {
        return {
            input: '',
            textarea: '',
            ListAsyncList: [],
            jiaodian: '',
            Modify: false,
            modalType: {
                delete: {
                    type: 'delete',
                    tipInfo: '确定要删除该条数据吗？',
                    btnText: '删除',
                    callBack: 'DeleteAsync'
                }
            }
        }
    },
    mounted() {
        this.getCategory()
    },
    methods: {
        onActionConfirm(index, _modalInfo) {
            this.$refs.CommonDialog.Show(_modalInfo.type, _modalInfo.tipInfo, _modalInfo.btnText, () => {
                this.$refs.CommonDialog.OnHandleCancel()
                this[_modalInfo.callBack](index)
            })
        },
        // 获取所有泳道消息
        async getCategory() {
            try {
                const result = await LineCntroller.LineCntrollerGetAllAsync()
                if (result.success) {
                    console.log(result.data)
                    this.ListAsyncList = result.data
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },
        // 添加泳道
        async InsertAsync() {
            const name = this.input
            const textarea = this.textarea
            if (name === '' || textarea === '') {
                this.$message.error('未输入名称或描述')
                this.input = ''
                this.textarea = ''
            } else {
                const array = this.ListAsyncList
                const newMapArr = array.map(item => {
                    const name1 = item.name
                    return name1 === name
                })
                if (newMapArr.includes(true)) {
                    this.$message.error('名字重复')
                } else {
                    try {
                        const result = await LineCntroller.LineCntrollerInsertAsync({
                            name: name,
                            describe: textarea
                        })
                        if (result.success) {
                            this.getCategory()
                            this.input = ''
                            this.textarea = ''
                            this.$message.success(result.message)
                        } else {
                            this.getCategory()
                            this.$message.error(result.message)
                        }
                    } catch (err) {
                        this.$message.error('服务器异常')
                    }
                }
            }
        },
        // 删除泳道
        async DeleteAsync(index) {
            const uuid = this.ListAsyncList[index].Id
            try {
                const result = await LineCntroller.LineCntrollerDeleteAsync({ id: uuid })
                if (result.success) {
                    this.getCategory()
                    this.$message.success(result.message)
                } else {
                    this.getCategory()
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },
        // 修改泳道
        async UpdateAsync(index) {
            const Id = this.ListAsyncList[index].Id
            const name = this.ListAsyncList[index].name
            const describe = this.ListAsyncList[index].describe
            if (name === '' || describe === '') {
                this.$message.error('未输入名称或描述')
            } else {
                try {
                    const result = await LineCntroller.LineCntrollerUpdateAsync({
                        Id: Id,
                        name: name,
                        describe: describe
                    })
                    if (result.success) {
                        this.getCategory()
                        this.jiaodian = ''
                        this.$message.success(result.message)
                    } else {
                        this.getCategory()
                        this.$message.error(result.message)
                    }
                } catch (err) {
                    this.$message.error('服务器异常')
                }
            }
        },
        // 修改泳道出现保存按钮
        oninput(index) {
            this.jiaodian = index
        },
        // 添加列取消按钮
        ModifyCancel() {
            this.Modify = false
        },
        // 添加列确认按钮
        ModifyConfirm() {
            this.Modify = false
        }
    }
}
</script>
<style lang="less" scoped src="@/assets/style/setting.less"></style>
<style lang="less" scoped>
.bot {
  height: 805px;
  margin: 31px;
  background: #ffffff;
  border: 1px solid #dcdfe4;
  box-shadow: 0px 2px 5px 0px rgba(152, 160, 179, 0.2);
  border-radius: 5px;
  padding: 15px 16px;
}
.bottoptop {
  width: 1371px;
  height: 40px;
  border-bottom: 1px solid #c8cdd5;
}
.bottoptop p {
  display: inline-block;
}
.bottopbot {
  width: 1371px;
  line-height: 60px;
  border-bottom: 1px solid #c8cdd5;
  padding: 10px 0;
}
.el-input {
  width: 320px;
  margin-left: 10px;
}
.el-textarea {
  width: 530px;
  margin-left: 140px;
}
.miaoshu {
  margin-left: 140px;
}
.tianjia {
  width: 60px;
  height: 35px;
  border-radius: 5px;
  color: #ffffff;
  line-height: 30px;
  text-align: center;
  margin-left: 320px;
}
.botbot {
  width: 1386px;
  height: 670px;
  overflow-y: auto;
  padding: 10px 0;
}
.botbottop {
  width: 1396px;
  height: 50px;
  border-bottom: 1px solid #c8cdd5;
}
.botbottop p {
  display: inline-block;
}
.botbottop button {
  float: right;
  margin-right: 15px;
  margin-top: 10px;
}
.botbotbot {
  width: 1386px;
  line-height: 60px;
  border-bottom: 1px solid #c8cdd5;
  padding: 10px 0;
}
.botbotbot:hover {
  background-color: rgba(153, 153, 153, 0.06);
}
.el-button {
  float: right;
  margin-right: 13px;
  margin-top: 10px;
}
::v-deep .el-textarea .el-input__count {
  height: 40px;
}
.addlie {
  width: 381px;
  height: 234px;
  background: #ffffff;
  box-shadow: 0px 2px 20px 0px rgba(21, 32, 41, 0.22);
  border-radius: 5px;
  position: absolute;
  right: 35%;
  top: 35%;
}
.addlietop {
  width: 311px;
  border-bottom: 1px solid #3579e0;
  font-weight: 400;
  font-size: 22px;
  margin-top: 20px;
  margin-left: 30px;
  font-style: normal;
  color: #333;
  line-height: normal;
}
.addlietcen {
  font-size: 16px;
  font-weight: 400;
  height: 80px;
  font-style: normal;
  color: #333;
  line-height: 80px;
  display: block;
  margin-left: 30px;
  margin-top: 20px;
}
.addliebot {
  margin-top: 30px;
}
.addliebot button {
  width: 138px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #bfbfbf;
  border-radius: 15px;
  margin: 0 25px;
}
</style>
